import React from 'react';
import { Layout, Menu, Dropdown, Avatar, Space } from 'antd';
import { UserOutlined, CrownOutlined, LogoutOutlined } from '@ant-design/icons';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';

const { Header, Sider, Content } = Layout;

const AdminLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, logout } = useAuth();

  const menuItems = [
    {
      key: '/home/permissions',
      icon: <UserOutlined />,
      label: '权限管理',
    },
    {
      key: '/home/vip',
      icon: <CrownOutlined />,
      label: 'VIP管理',
    },
  ];

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  const userMenuItems = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        background: 'linear-gradient(90deg, #1a365d 0%, #2c5282 100%)',
        padding: '0 20px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent)',
          backgroundSize: '20px 20px',
          opacity: 0.1
        }} />
        <h1 style={{ 
          margin: 0, 
          color: '#fff',
          textShadow: '2px 2px 4px rgba(0,0,0,0.2)',
          position: 'relative',
          zIndex: 1
        }}>管理员控制台</h1>
        <Dropdown 
          menu={{ items: userMenuItems }} 
          placement="bottomRight"
          arrow
        >
          <Space style={{ 
            cursor: 'pointer', 
            color: '#fff',
            position: 'relative',
            zIndex: 1
          }}>
            <Avatar 
              icon={<UserOutlined />} 
              style={{ 
                backgroundColor: '#fff',
                color: '#1a365d'
              }} 
            />
            <span style={{ 
              marginLeft: 8,
              textShadow: '1px 1px 2px rgba(0,0,0,0.2)'
            }}>
              {user?.username || '管理员'}
            </span>
          </Space>
        </Dropdown>
      </Header>
      <Layout>
        <Sider 
          width={200} 
          style={{ 
            background: 'linear-gradient(180deg, #1a365d 0%, #2c5282 100%)',
            boxShadow: '2px 0 8px rgba(0,0,0,0.15)'
          }}
        >
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            style={{ 
              height: '100%', 
              borderRight: 0,
              background: 'transparent',
              color: '#fff'
            }}
            items={menuItems}
            onClick={({ key }) => navigate(key)}
            theme="dark"
          />
        </Sider>
        <Layout style={{ padding: '24px', background: '#f0f2f5' }}>
          <Content style={{ 
            background: '#fff', 
            padding: 24, 
            margin: 0, 
            minHeight: 280,
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
          }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AdminLayout; 